<template>
	<div class="header">
		<div class="left-header">
			<span class="iconfont">&#xe65b;</span>
		</div>
		<div class="header-input" :style='headerInputStyle'>
			<span class="iconfont">&#xe614;</span>
			输入城市/景点/游玩主题
		</div>
		<router-link to="/city"  tag='div' class="right-header">
			{{city}}
			<span class="iconfont">&#xe616;</span>
		</router-link>
	</div>
</template>
<script>
	export default{
		name:'HomeHeader',
		props:{
			city:String
		},
		data(){
			return{
				headerInputStyle:{
					width:4.86
				}
			}
		},
		mounted  () {
		  let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		  console.log(w)
		  if(w>=375){
		  		this.headerInputStyle.width=5.8+'rem'
		  	console.log(this.headerInputStyle.width)
		  }
		}
	}
</script>
<style scoped lang="stylus">
@import '~@/assets/styles/global.styl'
	.header{
		height: 0.86rem;
		background-color: $bgColor
		font-size 18px
	}
	.left-header,.right-header,.header-input{
		float: left;
		
	}
	.right-header{
		float: right;
	}
	.left-header{
		width: .79rem;
		height: 100%;
		text-align: center;
		line-height: .86rem;
	}
	.left-header span{
		color: #fff;
	}
	.right-header{
		width: 1.2rem;
		height: 100%;
		color: #eee;
		text-align: center;
		line-height: .86rem;
	}
	.header-input{
		width: 4.86rem;
		height: .57rem;
		margin-top: .15rem;
		border: 1px solid $bgColor;
		background-color: #fff;
		border-radius: .1rem;
		line-height: .57rem;
		color: gray
	}
</style>